<template>
	<view>
		<view class="list-container">
			<view @click="goAudio(item.id,index)" class="song-box" v-for="item,index in song_list" :key="item.id">
				<view class="songs">
					<view class="rank">
						{{index+1}}
					</view>
					<view class="song-detail">
						<view class="song-name">{{item.name}}</view>
						<view class="song-ar">{{item.my_ar}}</view>
					</view>
				</view>
				<view @click.stop="goPlayMv(item.mv)" v-if="item.mv" class="mv">
					<image src="../static/video.png"></image>
				</view>
			</view>
		</view>
		<view @click="goLyric" class="audio-box" v-if="song_detail">
			<image src="../static/play.jpg"></image>
			<audio @play="goLyric" @timeupdate="timeupdate" :src="song_detail.song_url" controls
				:name="song_detail.name" :author="song_detail.my_ar" :poster="song_detail.al.picUrl">
			</audio>
			<image src="../static/play.jpg"></image>
		</view>
	</view>
</template>

<script>
	import {
		getLyricApi,
		getSearchDetailApi,
		getSongUrlApi,
		getSongDetailApi
	} from "@/api/api.js"
	export default {
		name: "song_list",
		props: {
			song_list: {
				type: Array,
				default: () => {
					return [];
				}
			},
			nextOrPrevId: {
				type: Object,
				defaultL: () => {
					return {};
				}
			},
			reachBottom: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			keywords: {
				type: String,
				default: () => {
					return '';
				}
			}
		},
		data() {
			return {
				showSong: false, //展示歌词
				lyric: '', //歌词
				currentTime: 0, //歌词播放时间
				isChange: false, //是否切歌
				currentIndex: 0, //当前音乐的index
				song_detail: null, //初始化歌曲
				audio: null,
				songBoxHeight: 0,
				offset: 1, //分页
				songs_temp: [],
				songList: []
			};
		},
		watch: {
			song_list: {
				deep: true,
				handler(newval, old) {
					this.$nextTick(() => {
						this.songList = newval;
						this.song_detail = newval[0];
						this.$forceUpdate();
					});
				}
			},
			nextOrPrevId: {
				deep: true,
				handler(newval, old) {
					this.$nextTick(() => {
						this.currentIndex = newval.index;
						this.goAudio(newval.id, newval.index);
						this.$forceUpdate();
					});
				}
			},
			reachBottom: {
				deep: true,
				handler(newval, old) {
					if (newval != old) {
						this.$nextTick(() => {
							// this.getData();
							this.$forceUpdate();
						});
					}
				}
			}
		},
		created() {
			this.audio = document.getElementsByTagName("audio");
			this.$emit("audioEmit", this.audio);
			this.song_detail = this.song_list[0];
		},
		methods: {
			//播放音乐
			goAudio(id, index) {
				this.currentIndex = index;
				this.$emit("currentIndexEmit", this.currentIndex);
				if (this.song_detail == this.song_list[index]) {
					this.isChange = !this.isChange;
					this.showSong = true;
					this.audio[0].play();
					this.getLyric(id); //歌词
					this.$emit('showSongEmit', this.showSong);
					return;
				}
				this.isChange = !this.isChange;
				this.$emit("isChangeEmit", this.isChange);
				this.getLyric(id); //歌词
				this.song_detail = this.song_list[index];
				this.audio[0].autoplay = true;
				this.audio[0].src = this.song_detail.song_url;
				const play = () => {
					this.audio[0].play().catch((err) => {
						console.log(JSON.stringify(err));
						play();
					});
				}
			},
			//获取歌词
			async getLyric(id) {
				let data = {
					id
				};
				let res = await getLyricApi(data);
				this.lyric = await res.lrc.lyric;
				await this.$emit("lyricEmit", this.lyric);
				await this.$emit('showSongEmit', true);
			},
			goLyric() {
				if (!this.audio[0].autoplay) return;
				this.showSong = true;
				this.$emit('showSongEmit', this.showSong);
			},
			//audio timeupdate
			timeupdate(e) {
				this.currentTime = e.detail.currentTime;
				this.$emit('currentTimeEmit', this.currentTime);
			},
			//播放mv
			goPlayMv(mv) {
				const url = `/pages/playmv/playmv?id=${mv}`;
				this.$navigateTo(url);
			},
			async getData() {
				this.offset++;
				let data = {
					keywords: this.keywords,
					type: 1,
					offset: this.offset
				};
				let res = await getSearchDetailApi(data);
				this.songs_temp = await res.result.songs;
				await this.getSongUrl();
				await this.getMyAr();
				setTimeout(() => {
					this.song_list = [...this.song_list, ...this.songs_temp];
					this.songs_temp = [];
				}, 1000);
			},
			async getSongUrl() {
				let ids = [];
				for (let j = 0; j < this.songs_temp.length; j++) {
					ids.push(this.songs_temp[j].id);
				}

				ids = ids.join(',');
				let data = {
					ids
				};
				let res = await getSongUrlApi(data);
				let urls = res.data;
				let result = await getSongDetailApi(data);
				let mvs = result.songs_temp;

				for (let i = 0; i < this.songs_temp.length; i++) {
					urls.map(it => {
						if (it.id == this.songs_temp[i].id) {
							this.$set(this.songs_temp[i], 'song_url', it.url);
						}
					});
				}
			},
			getMyAr() {
				for (let j = 0; j < this.songs_temp.length; j++) {
					let artists = "";
					this.songs_temp[j].ar.map(it => {
						artists += `${it.name}/`;
					});
					this.$set(this.songs_temp[j], 'my_ar', artists.slice(0, artists.length - 1));
				}
			},
		}
	}
</script>

<style lang="scss">
	.list-container {
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding-bottom: 150rpx;

		.song-box {
			width: 95%;
			height: 80rpx;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;

			.songs {
				display: flex;

				.rank {
					width: 50rpx;
					line-height: 80rpx;
					margin-right: 20rpx;
					font-size: 30rpx;
					font-weight: 600;
					color: #d6d6d6;
				}

				.song-detail {
					margin: auto 0;

					.song-name {
						font-size: 26rpx;
					}

					.song-ar {
						font-size: 20rpx;
						color: #b5b5b5;
					}
				}
			}

			.mv {
				display: inline-block;
				margin: auto 30rpx;

				image {
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					margin: auto 0;
				}
			}
		}
	}

	.audio-box {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 150rpx;
		text-align: center;
		background-color: rgb(252, 252, 252);

		image {
			width: 80rpx;
			height: 80rpx;
			display: block;
			margin: auto;
			border-radius: 20rpx;
		}

		audio {
			text-align: left;
			display: block;
			margin: auto;
		}
	}
</style>
